<template>
  <div class="home">
      <el-row :span="24" type="flex" justify="space-around">
          <el-col>
            <div class="demo-image">
                <div class="block" v-for="fit in fits" :key="fit">
                  <el-image
                      style="width: 100px; height: 100px"
                      :fit="fit" :src="urls"></el-image>
                      <p class="demonstration">{{ fit }}</p>
                </div>
            </div>
          </el-col>
      </el-row>
      <el-row :span="24" type="flex" justify="space-around">
          <el-col>
            <div class="demo-image">
                <div class="block" v-for="fit in fits" :key="fit">
                  <el-image
                      style="width: 100px; height: 100px"
                      :src="urls"
                      :fit="fit"></el-image>
                      <p class="demonstration">{{ fit }}</p>
                </div>
            </div>
          </el-col>
      </el-row>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
      return {
        fits: ['美食', '大牌惠吃', '跑腿代购', '汉堡披萨', '甜品饮品'],
        urls: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1368138900,2253106058&fm=26&gp=0.jpg'
        
      }
    }
}
</script>
<style scoped>
.home{
  width: 800px;
  height: 500px;
  

}
.block{
  float: right;
  margin-right: 50px;
  margin-top: 20px;
}
.demonstration{
  text-align: center;
}

</style>
